<template>
  <div class="box">
    <el-card>
        <div ref="mydiv" class="mydiv"></div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import router from '@/router'
import { getIncomePayList } from '@/api/incomePay'
export default {
  data () {
    return {
      yearslist:[], //年月的数组
      payment:[], //总支出的数组
      income:[] //总收入的数组 
    }
  },
  methods:{
    // 得到x轴时间
  async getIncomePayList(){
  let data = await getIncomePayList()
  // console.log(data);
  // 对时间进行从小到大的排序
  data=this.setArray(data)
  const maxMonth=((new Date( data[data.length-1].timeleave)).getMonth()+1)
  // console.log(maxMonth);
 
 const result= this.fun(data,maxMonth)
  result.reverse().forEach(item=>{
    // console.log(this);
    this.income.push(item.income)
    this.payment.push(item.payment)
  })
  console.log(this.income);
  const dateArr = []
  data.forEach(item => {
    const date = (new Date(item.timeleave)).getFullYear() + '-' + ((new Date(item.timeleave)).getMonth()+1)
    if (dateArr.indexOf(date) == -1) {
      dateArr.push(date)
    }
  })
  this.yearslist=dateArr
  },
  // 根据关键字来进行排序
  	setArray(c) {
    c.sort(this.compare('timeleave'));
    return c;
  },
  compare(property){
    return function (a,b){
      return a[property]-b[property];
    }
  },
  // 月份处理
 getIncomePay(list, month) {
    let income = 0
    let payment = 0
    list.forEach(item => {
        if ((new Date(item.timeleave).getMonth() + 1) === month) {
            income += item.income
            payment += item.payment
        }
    })
    return { income, payment }
},
 fun(list, month) {
    let rst = []
    while (month) {
        rst.push(this.getIncomePay(list, month))
        month--
    }
    return rst
}
  },
async mounted () {
  await this.getIncomePayList()
  var myChart = echarts.init(this.$refs.mydiv);
  // 绘制图表
  var setOption=({
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: 'red'
            }
        }
    },
    toolbox: {
        feature: {
            dataView: {show: true, readOnly: false,optionToContent: function(opt) {
    var axisData = opt.xAxis[0].data;
    var series = opt.series;
    var table = '<table style="width:100%;text-align:center"><tbody><tr>'
                 + '<td>时间</td>'
                 + '<td>' + series[0].name + '</td>'
                 + '<td>' + series[1].name + '</td>'
                 + '</tr>';
    for (var i = 0, l = axisData.length; i < l; i++) {
        table += '<tr>'
                 + '<td>' + axisData[i] + '</td>'
                 + '<td>' + series[0].data[i] + '</td>'
                 + '<td>' + series[1].data[i] + '</td>'
                 + '</tr>';
    }
    table += '</tbody></table>';
    return table;
},textareaBorderColor:'#333',readOnly:true,lang:['数据视图', '关闭'],backgroundColor:'#CCEEFF',width:'100px'},
            magicType: {show: true, type: ['line', 'bar','stack']},
            restore: {show: true},
            saveAsImage: {show: true}
        },
        iconStyle:{
          opacity:0.5
        }
    },
    legend: {
        left:'auto',
        top:'auto',
        data: ['支出', '收入']
    },
    xAxis: [
        {
            type: 'category',
            name:'时间',
            data: this.yearslist,
            axisPointer: {
                type: 'shadow'
            },
           
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '金额',
            min: 50000,
            max: 2000000,
            interval: 50000,
            axisLabel: {
                formatter: '￥{value}'
            }
        },
    ],
    series: [
        {
            name: '支出',
            type: 'bar',
            data: this.payment
        },
        {
            name: '收入',
            type: 'bar',
            data: this.income
        }
    ],
   
  });

  myChart.setOption(setOption);

  myChart.on('click', function (params) {
    // console.log(123123,params);
    // console.log(month);
    router.push(`/incomePay/details/${params.name}`)
  })
  }
}
</script>

<style>
  .box{
    padding: 20px;
  } 
  .mydiv{
    width: 1200px;
    height: 700px;
  }
</style>
